.posts-navigation {
    background-color: #FFF;
    overflow: hidden;
    position: relative;
    width: 100%;
    .wrapper {
        border-top: 1px solid $bd-color;
    }
}

.posts-pagination {
    width: 100%;
    overflow: hidden;

    .next-posts, .prev-posts {
        display: block;
        width: 40px;
        text-align: center;
        color: #FFF;
        background-color: $black;
        i {
            font-size: 28px;
            line-height: 40px;
            vertical-align: top;
        }
    }
    .prev-posts {
        float: left;
    }
    .next-posts {
        float: right;
    }
    
    .pages {
        overflow: hidden;
        text-align: center;
        line-height: 40px;
        
        a {
            display: inline-block;
            width: 40px;
            color: $gray;
            &.active, &:hover, &:focus {
                color: $black;
            }
        }
    }
}

.posts-filter {
    border-top: 1px solid $bd-color;
    padding: 5px;
    @include boxSizing(border-box);
    label {
        display: none;
        color: $gray;
        font-size: 14px;
        line-height: 30px;
    }
}

@media screen and (min-width: $vw-small) {
    .posts-pagination {
        float: left;
        width: 398px;
        width: -webkit-calc(100% - 240px);
        width: calc(100% - 240px);
    }
    
    .posts-filter {
        border-top: none;
        border-left: 1px solid $bd-color;
        float: right;
        width: 240px;
    }
}

@media screen and (min-width: 1000px) {
    .posts-pagination {
        float: left;
        width: -webkit-calc(100% - 340px);
        width: calc(100% - 340px);
        

        .next-posts, .prev-posts {
            i {
                line-height: 60px;
            }
        }
        
    
    .pages {
            line-height: 60px;
        }
    }
    
    .posts-filter {
        border-left: 1px solid $bd-color;
        float: right;
        width: 340px;
        padding: 15px;
        label {
            display: inline-block;
        }
        .select {
            float: right;
            width: 200px;
        }
    }
}